<template>
	<view class="main">
		<view class="control">
			<view class="title item">低功耗蓝牙设备</view>
			<view class="btn item">
				<view class="btn-wrapper" @click="scan">
					<text class="btn-txt" :class="scanFlag ? 'checked' : 'unchecked'"></text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="device"
				v-for="(item, index) in deviceList"
				:key="index"
				@tap="checkDevice(item)"
			>
				<view class="name item">{{ item.name }}</view>
				<view class="detail-btn item" @tap="detail(item)">连接</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scanFlag: false,
				deviceList: [],
				selected: null,
				writeText: ''
			}
		},
		onHide() {
			console.log('page on hide close scan')
			if (this.scanFlag) {
				this.stopScan()
			}
		},
		methods: {
			scan() {
				if (this.scanFlag) {
					this.stopScan()
				} else {
					this.startScan()
				}
				this.scanFlag = !this.scanFlag
			},
			startScan() {
				if (!this.scanFlag) {
					this.deviceList = []
				}
				uni.openBluetoothAdapter({
					success: () => {
						uni.startBluetoothDevicesDiscovery();
						uni.onBluetoothDeviceFound((result) => {
							const resultList = result.devices.filter(d => d.name);
							this.deviceList = this.deviceList.concat(resultList);
						})
						console.log('开始扫描蓝牙设备')
					}
				})
			},
			stopScan() {
				uni.stopBluetoothDevicesDiscovery({
					success: () => {
						console.log('已停止扫描蓝牙设备', 'uni-ext');
					},
					fail: (error) => {
						console.log('停止扫描', JSON.stringify(error), 'uni-ext');
					}
				})
			},
			detail(device) {
				this.scan()
				uni.navigateTo({
					url: `/pages/detail/index?deviceId=${device.deviceId}&deviceName=${device.name}`
				})
			}
		}
	}
</script>

<style>
	.main {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #eee;
	}
	.main .control {
		height: 40px;
		line-height: 40px;
		margin: 0 10px 10px 10px;
		border-radius: 10px;
		background-color: #fff;
	}
	.main .control .item {
		height: 100%;
		display: inline-block;
	}
	.main .control .title {
		margin-left: 10px;
	}
	.main .control .btn {
		float: right;
		margin-right: 10px;
	}
	.main .control .btn .btn-wrapper {
		position: relative;
		display: inline-block;
		width: 40px;
		height: 20px;
		border-radius: 10px;
		vertical-align: middle;
		background-color: #eee;
	}
	.main .control .btn .btn-wrapper .checked {
		right: 0;
	}
	.main .control .btn .btn-wrapper .unchecked {
		background-color: #aaa;
	}
	.main .control .btn .btn-txt {
		width: 20px;
		height: 20px;
		position: absolute;
		display: inline-block;
		border-radius: 10px;
		background-color: blue;
	}
	.main .list {
		flex-grow: 1;
		margin: 10px 10px 28px 10px;
		height: 500px;
		border-radius: 10px;
		background-color: #fff;
		overflow-y: auto;
	}
	.main .list .device {
		padding: 15px 10px;
		box-sizing: border-box;
	}
	.main .list .device .item {
		display: inline-block;
	}
	.main .list .device .detail-btn {
		float: right;
	}
</style>